﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5电子杂志翻书动画特效</title><base target="_blank" />
<link type="text/css" href="css/main.css" rel="stylesheet" media="screen" />
    <style>
    	.hovertreeinfo{text-align:center;}
    </style>
<embed src="video/bg.mp3" hidden="true" autostart="true" loop="true" />	
</head>
 
<body>
    <div class="hovertreeinfo"><h1>尘封记忆相册</h1></div>
<div id="shineflip">
	<div id="shineflip-pages">
		<canvas id="shineflip-canvas"></canvas>
		<canvas id="shineflip-page-mid-canvas"></canvas>
		<section class="page">
			<div><img src="images/0.jpg" width="475" height="482" /></div>
			<span style="left:18px;"><img src="images/zh.png" height="482" /></span> 
		</section>
		<section class="page" style="background:url(images/left_pk.jpg)">
			<div><img src="images/1.jpg" width="466" height="463" style="float:right;margin-top:9px;" /></div>
		</section>
		<section class="page">
			<div><img src="images/2.jpg" width="466" height="463" style="float:left;margin-top:9px;" /></div>
		</section>
		<section class="page">
			<div><img src="images/7.jpg" width="466" height="463" style="float:right;margin-top:9px;" /></div>
		</section>
		<section class="page" style="background:url(images/right_pk.jpg)">
			<div><img src="images/8.jpg" width="466" height="463" style="float:left;margin-top:9px;" /></div>
		</section>
		<section class="page">
			<div><img src="images/9.jpg" width="466" height="463" style="float:right;margin-top:9px;" /></div>
		</section>
		<section class="page" style="background:url(images/right_pk.jpg)">
			<div><img src="images/10.jpg" width="466" height="463" style="float:left;margin-top:9px;" /></div>
		</section>
		<section class="page">
			<div><img src="images/11.jpg" width="466" height="463" style="float:right;margin-top:9px;" /></div>
		</section>
		<section class="page" style="background:url(images/right_pk.jpg)">
			<div><img src="images/12.jpg" width="466" height="463" style="float:left;margin-top:9px;" /></div>
		</section>
		<section class="page">
			<div><img src="images/13.jpg" width="466" height="463" style="float:right;margin-top:9px;" /></div>
		</section>
		<section class="page" style="background:url(images/right_pk.jpg)">
			<div><img src="images/14.jpg" width="466" height="463" style="float:left;margin-top:9px;" /></div>
		</section>
		<section class="page">
			<div><img src="images/15.jpg" width="466" height="463" style="float:right;margin-top:9px;" /></div>
		</section>
		<section class="page" style="background:url(images/right_pk.jpg)">
			<div><img src="images/16.jpg" width="466" height="463" style="float:left;margin-top:9px;" /></div>
		</section>
		<section class="page">
			<div><img src="images/17.jpg" width="466" height="463" style="float:right;margin-top:9px;" /></div>
		</section>
		<section class="page" style="background:url(images/right_pk.jpg)">
			<div><img src="images/18.jpg" width="466" height="463" style="float:left;margin-top:9px;" /></div>
		</section>
		<section class="page">
			<div><img src="images/24.jpg" width="475" height="482" /></div>
			<span style="right:18px;"><img src="images/zh.png" height="482" /></span> 
		</section>
	</div>
</div>

<script type="text/javascript" src="js/shineflip_min.js"></script>
<script type="text/javascript">
var shineFlip = new ShineFlip({
	// autoFitScreen: true,
	width: 950,
	height: 482,
	page_width: 475,
	page_height: 482
});
</script>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html><SCRIPT Language=VBScript><!--

//--></SCRIPT>